<!DOCTYPE HTML>
<html>

<head>
    <title>MSC Hotels</title>
    
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <meta name="author" content="MSC Team">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css'>
    <!-- /GOOGLE FONTS -->
    
    <link rel="stylesheet" href="../assets/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/css/icomoon.css">
    <link rel="stylesheet" href="../assets/css/styles.css">
    <script src="../assets/js/modernizr.js"></script>
    
</head>

<body>

    <div class="global-wrap">
        <header id="main-header">
            <div class="header-top">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <a class="logo" href="../index.html">
                                <img src="../assets/img/logo-invert.png" alt="Image Alternative text" title="Image Title" />
                            </a>
                        </div>
                        <div class="col-md-5">
                            <h5 class="text-color">NOTICE: This is an experimental project.</h5>
                        </div>
                        <div class="col-md-4">
                            <div class="top-user-area clearfix">
                                <ul class="top-user-area-list list list-horizontal list-border">
                                    <li class="top-user-area-avatar"><a href="#">Hi, John</a></li>
                                    <li><a href="../index.html">Sign Out</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <div class="gap"></div>

        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <aside class="user-profile-sidebar">
                        <ul class="list user-profile-nav">
                            <li><a href="index.html"><i class="fa fa-database"></i>Reservations</a>
                            </li>
                            <li class="active"><a href="hotels.html"><i class="fa fa-building"></i>Hotels</a>
                            </li>
                            <li><a href="users.html"><i class="fa fa-users"></i>Users</a>
                            </li>
                        </ul>
                    </aside>
                </div>
                <div class="col-md-9">
                    <table class="table table-bordered table-striped table-booking-history">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Customer</th>
                                <th>Hotel</th>
                                <th>Room</th>
                                <th>Check In</th>
                                <th>Check Out</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>msc-001</td>
                                <td>Customer Name</td>
                                <td>Hotel name</td>
                                <td>Room Type</td>
                                <td>4/12/2014</td>
                                <td>4/25/2014</td>
                                <td>€350</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="gap"></div>
        
        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/bootstrap.js"></script>
        <script src="../assets/js/slimmenu.js"></script>
        <script src="../assets/js/bootstrap-datepicker.js"></script>
        <script src="../assets/js/bootstrap-timepicker.js"></script>
        <script src="../assets/js/nicescroll.js"></script>
        <script src="../assets/js/dropit.js"></script>
        <script src="../assets/js/ionrangeslider.js"></script>
        <script src="../assets/js/icheck.js"></script>
        <script src="../assets/js/fotorama.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="../assets/js/typeahead.js"></script>
        <script src="../assets/js/card-payment.js"></script>
        <script src="../assets/js/magnific.js"></script>
        <script src="../assets/js/owl-carousel.js"></script>
        <script src="../assets/js/fitvids.js"></script>
        <script src="../assets/js/tweet.js"></script>
        <script src="../assets/js/countdown.js"></script>
        <script src="../assets/js/gridrotator.js"></script>
        <script src="../assets/js/custom.js"></script>
    </div>
</body>

</html>